<template>
	<view class="login">
		<!-- <view class="logo">
			<image src="@/static/images/logo.png" mode="aspectFill"></image>
		</view> -->
		<view class="header">
			<view class="title">重置密码</view>
			<!-- <view class="des">*所有字段皆为必填项</view> -->
		</view>
		<u--form 
		labelPosition="top" 
		labelWidth="70"
		:model="form" 
		:rules="rules" 
		errorType="toast"
		ref="uForm" 
		:labelStyle="{color:'#000'}">
			<u-form-item prop="username">
				<view class="label">手机号</view>
				<Input :islabel="false" name="请输入手机号" :maxlength="11" type="number" v-model="form.username" />
			</u-form-item>
			<u-form-item prop="verify_code">
				<view class="label">验证码</view>
				<VerifyCode 
				:islabel="false" 
				name="验证码" :username="form.username" v-model="form.verify_code" ></VerifyCode>
			</u-form-item>
			<u-form-item prop="password">
				<view class="label">密码</view>
				<Input :islabel="false" name="含字母和数字且长度为8-16位" type="password" v-model="form.password" />
			</u-form-item>
			<u-form-item prop="repassword" labelWidth="120">
				<view class="label">确认密码</view>
				<Input :islabel="false" name="再次输入新密码" type="password" v-model="form.repassword" />
			</u-form-item>
		</u--form>
		<view class="submit">
			<u-button color="#468EFF" :loading="loading" :disabled="disabled" @click="submit">确定</u-button>
		</view>
		<!-- <view class="other" v-if="type!=1">
			<text @tap="back">返回登录</text>
		</view> -->
		<CodePopup
		title="重置登录密码"
		btnText="立即重置"
		:loading="loading"
		@show="e=>codeShow=e" 
		:show="codeShow" 
		:username="form.username" 
		v-model="form.verify_code" 
		@submit="setPassword"
		></CodePopup>
	</view>
</template>

<script>
	import {mixin} from '@/Mixins/mixin.js'
	import { mapState, mapMutations } from 'vuex'
	import Input from '@/components/Input.vue'
	import VerifyCode from '@/components/verifycode.vue'
	import CodePopup from '@/components/codePopup.vue'
	export default {
		mixins:[mixin],
		components:{Input,VerifyCode,CodePopup},
		data() {
			return {
				loading:false,
				type:0,
				codeShow:false,
				form:{
					username :'',//账号
					verify_code:'',//验证码
					password:'',//密码
					repassword :'',
				},
				rules: {
					username : [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					],
					verify_code : [
						{
							required: true,
							message: '请输入验证码',
							trigger: ['blur', 'change']
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								let regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/
								return regex.test(value);
							},
							message: '密码必须为8-16位包含大小写字母和数字的组合',
							trigger: ['change','blur'],
						}
					],
					repassword:[
						{
							required: true,
							message: '请再次输入密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if(value === this.form.password){
									return true
								}else{
									return false
								}
							},
							message: '两次密码不相同',
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		onReady() {
			
		},
		onLoad(e) {
			if(e.type){
				this.type = e.type
			}
			if(e.type==1){
				uni.setNavigationBarTitle({
				    title: '修改密码'
				});
			}
		},
		computed: {
			...mapState(['userInfo','token']),
			disabled(){
				if(this.form.username&&this.form.password&&this.form.repassword){
					return false
				}else{
					return true
				}
			}
		},
		methods: {
			
			submit() {
				this.$refs.uForm.validate().then(res => {
					// this.codeShow = true
					this.setPassword()
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			//重置密码
			async setPassword(){
				this.codeShow = false
				this.loading = true
				let data = await this.$http({
					url:this.$api.setPassword,
					method: 'POST',
					hideLoading: true,
					data:this.form
				})
				console.log('[重置密码]',data)
				this.loading = false
				if(data.code==200){
					this.$store.commit('ChangeUserInfo',{});
					this.$store.commit('ChangeToken','');
					uni.$u.toast(data.msg);
					setTimeout(()=>{
						this.back()
					},1500)
				}else{
					uni.showToast({
					    title: data.msg||'重置密码失败',
						icon:'none',
					    duration: 2000
					})
				}
			},
			codeChange(text) {
			    this.tips = text;
			},
			getCode() {
				if(this.form.username){
					if (this.$refs.uCode.canGetCode) {
						this.shayuSms()
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.$u.toast('手机号码不正确');
				}
				
			},
			
			// back(){
			// 	uni.redirectTo({
			// 		url: '/pages/Login/index'
			// 	});
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.login{
		min-height: 100vh;
		padding: 112rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		background-color: #FFF;
		.logo{
			text-align: center;
			margin-bottom: 80rpx;
			image{
				width: 280rpx;
				height: 178rpx;
			}
		}
		.header{
			// margin-top: 170rpx;
			margin-bottom: 76rpx;
			text-align: center;
			.title{
				font-size: 48rpx;
				font-weight: 400;
				color: #000;
				line-height: 68rpx;
				letter-spacing: 2rpx;
			}
			.des{
				font-size: 28rpx;
				font-weight: 400;
				color: #999;
				line-height: 42rpx;
				letter-spacing: 1rpx;
				margin-bottom: 46rpx;
			}
		}
		::v-deep .u-form-item__body__left{
			margin-bottom: 0;
		}
		::v-deep .u-form-item__body{
			padding: 20rpx 0;
		}
		::v-deep.u-button__text {
			color: #468EFF;
			font-weight: 400;
		}
		::v-deep .Ginput {
			border-bottom: 0 !important;
			.u-input {
				border: 0;
			}
		}
		.u-form-item {
			display: flex;
			border-bottom: 1rpx solid #EBEEF5;
			&:last-child {
				border: 0;
			}
			.label {
				width: 240rpx;
			}
			::v-deep.input {
				text-align: right;
			}
			::v-deep.uni-input-input {
				text-align: right;
			}
			.uni-input-placeholder {
				text-align: right;
			}
		}
		.submit{
			margin-top: 70rpx;
			::v-deep button{
				color: #FFF;
				background: #000;
				border: 0;
				height: 82rpx;
				// border-radius: 9rpx;
				&.u-button--disabled{
					opacity: 1;
					color: #FFF;
					background: #252525;
				}
			}
		}
		.other{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 24rpx;
			margin-top: 40rpx;
			text{
				font-size: 25rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 33rpx;
			}
		}
	}
</style>
